@import "color";
@import "basic";

@buttonSize: 32px;
@buttonOpacity: 0.6;
@buttonHoverOpacity: 0.99;
@bgColor: #044a43;
@normalColor: rgba(255, 255, 255, 1);
@disableColor: rgba(150, 150, 150, 1);
@subBgColor: rgba(47, 54, 60, 1);
@menuPadding: 30px;
@itemMargin: 5px;
@itemSpace: @buttonSize + @itemMargin*2;
@slideTop: 45px;
@slideButtonsRadius: 5px;
@slideButtonsPadding: 5px;
@slideButtonWidth: 100px;
@slideButtonHeight: 30px;
@slideButtonIconSize: 24px;
@slideTabTabWidth: 50px;
@slideTabTabHeight: 35px;
@slideTabSubButtonHeight: 26px;
@activeColor: rgb(255, 210, 0);

.iconColor(@color:white) {
  position: relative;
  left: -100px;
  border-right: 100px solid transparent;
  filter: drop-shadow(100px 0 @color);
}

.iconMenu {
  transform: scale(1);
  transform-origin: right top;
  .abs;
  right: @menuPadding+20;
  top: @menuPadding;
  display: flex;
  .animation();
  .iconMenuItem {
    width: @buttonSize;
    height: @slideTop;
    margin: 0 @itemMargin;
    display: block;
    .rel;
    opacity: @buttonOpacity;
    .iconMenuButton {
      width: @buttonSize;
      height: @buttonSize;
      border-radius: @buttonSize;
      background-color: @bgColor;
      cursor: pointer;
      overflow: hidden;
      img {
        width: @buttonSize;
        height: @buttonSize;
        .iconColor(@normalColor);
      }
      .box-glow(2px);
    }
    .iconMenuSlide {
      .abs;
      top: @slideTop;
      left: @buttonSize/2;
      transform: translateX(-50%);
      display: none;
      .iconMenuSlideButtons {
        border-radius: @slideButtonsRadius;
        background-color: @bgColor;
        padding: @slideButtonsPadding;
        .iconMenuSlideButton {
          width: @slideButtonWidth;
          height: @slideButtonHeight;
          display: flex;
          cursor: pointer;
          opacity: @buttonOpacity;
          overflow: hidden;
          img {
            width: @slideButtonIconSize;
            height: @slideButtonIconSize;
            margin: (@slideButtonHeight - @slideButtonIconSize)/2;
            .iconColor(@normalColor);
          }
          .iconMenuSlideButtonLabel {
            color: @normalColor;
            line-height: @slideButtonHeight;
            font-size: 14px;
            .tal;
            .abs;
            left: @slideButtonHeight + 10px;
            height: @slideButtonHeight;
          }
          &:hover {
            opacity: @buttonHoverOpacity;
          }
          &.active {
            opacity: @buttonHoverOpacity;
            .iconMenuSlideButtonLabel {
              color: @activeColor;
            }
            img {
              .iconColor(@activeColor);
            }
          }
          &.disable {
            opacity: @buttonOpacity;
            .iconMenuSlideButtonLabel {
              color: @disableColor;
            }
            img {
              .iconColor(@disableColor);
            }
          }
          &.checkbox {
            background-image: url("../img/iconMenu/uncheck.png");
            background-repeat: no-repeat;
            .fn;
            &.active {
              background-image: url("../img/iconMenu/check.png");
              opacity: @buttonOpacity;
              .iconMenuSlideButtonLabel {
                color: @normalColor;
              }
              &:hover {
                opacity: @buttonHoverOpacity;
              }
            }
          }
        }
      }

      .iconMenuSlideTabs {
        border-radius: @slideButtonsRadius;
        background-color: @bgColor;
        overflow: hidden;
        .iconMenuSlideTabsTabContainer {
          display: flex;
          .iconMenuSlideTabsTab {
            width: @slideTabTabWidth;
            height: @slideTabTabHeight;
            color: @normalColor;
            .tac;
            line-height: @slideTabTabHeight;
            font-size: 14px;
            &.activeTab {
              background-color: @activeColor;
            }
          }
        }
        .iconMenuSlideTabsMenuContainer {
          .iconMenuSlideTabsMenu {
            display: none;
            &.activeTab {
              display: block;
            }
            .iconMenuSlideTabMenu {
              .iconMenuSlideTabMenuButton {
                height: @slideButtonHeight;
                color: @normalColor;
                .tac;
                line-height: @slideButtonHeight;
                font-size: 14px;
                opacity: @buttonOpacity;
                &:hover {
                  opacity: @buttonHoverOpacity;
                }
                &.active {
                  opacity: @buttonHoverOpacity;
                  color: @activeColor;
                }
                &.disable {
                  opacity: @buttonOpacity;
                  color: @disableColor;
                }
              }
              .iconMenuSlideTabMenuButtons {
                background-color: @subBgColor;
                display: none;
                .iconMenuSlideTabMenu {
                  .iconMenuSlideTabMenuButton {
                    height: @slideTabSubButtonHeight;
                    line-height: @slideTabSubButtonHeight;
                    .tac;
                    font-size: 12px;
                  }
                }
              }
            }
          }
        }
      }

    }
    &:hover {
      opacity: @buttonHoverOpacity;
    }
    &.active {
      opacity: @buttonHoverOpacity;
      .iconMenuButton {
        img {
          .iconColor(@activeColor);
        }
      }
    }
    &.disable {
      opacity: @buttonOpacity;
      .iconMenuButton {
        img {
          .iconColor(@disableColor);
        }
      }
    }
  }
}